<template>
  <div v-loading="loading">
    <!-- 搜索结果 -->
    <el-table style="width: 100%;height: 550px;overflow = auto;"
              :data="tableData"
              border="true">
      <template #empty>
        <el-empty v-show="tableData == 0"
                  description="空空如也" />
      </template>
      <el-table-column align="center"
                       prop="userId"
                       label="ID"></el-table-column>
      <el-table-column align="center"
                       prop="userName"
                       label="姓名"></el-table-column>
      <el-table-column align="center"
                       prop="userSex"
                       label="性别"></el-table-column>
      <el-table-column align="center"
                       prop="userPhone"
                       label="联系电话"></el-table-column>
      <el-table-column align="center"
                       prop="userAdderss"
                       label="地址"></el-table-column>
      <el-table-column align="center">
        <template #header>
          <div style="display: flex;align-items: center;justify-content: center;">
            <!-- 刷新 -->
            <el-icon class="pointer"
                     style="font-size: 28px;"
                     @click="getUsers">
              <Refresh color="#79bbff" />
            </el-icon>
          </div>
        </template>
        <template #default="scope">
          <el-icon @click="delUser(scope.$index)"
                   style="font-size: 24px;">
            <Delete class="pointer"
                    color="#f56c6c" />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  ArrowRight,
  Refresh,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
export default {
  props: ['admin'],
  components: {
    ArrowLeft,
    ArrowRight,
    Refresh,
    Delete,
    Edit,
  },
  data() {
    return {
      tableData: [
        {
          userId: 1,
          userName: '哈哈哈',
          userSex: '男',
          userPhone: '1371297429423',
          userAdderss: '广州软件学院',
        },
      ],
      loading: false, // 加载弹窗
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    delUser(index) {
      this.loading = true
      request
        .post('/api/suser/delUser', {
          userId: this.tableData[index].userId,
        })
        .then((res) => {
          this.loading = false
          this.tableData.splice(index, 1)
          ElMessage({
            message: '删除成功',
            type: 'success',
            duration: 2000,
          })
        })
    },
    getUsers() {
      this.loading = true
      // this.$refs.table.setScrollTop(0)
      request.get('/api/getAllUser').then((res) => {
        this.loading = false
        this.tableData = res
        console.log(res)
      })
    },
  },
}
</script>
<style scoped>
.pointer:hover {
  cursor: pointer;
}
</style>
  